<template>
	<view class="customer-notice">
		<view class="search-header">
			<view class="search-searchbox">
				<view class="iconfont iconsousuohome"></view>
				<input class="search-input" v-model="searchKey" confirm-type="search" @confirm="initEsOrderNotice" placeholder="搜索顾客姓名"
				 placeholder-class="placeholder"></input>
				<view class="search-clear iconfont iconguanbi1" v-if="searchKey" @tap="searchKeyFun"></view>
			</view>
			<!-- <view class="order-condition" @tap="showSider">
				<image src="~@/packageC/static/img/condition.png" mode="筛选"></image>
			</view> -->
		</view>
		<view class="scrollList">
			<view class="tui-list city-list" v-if="customerList.length > 0">
				<block v-for="(item,index) in customerList" :key="index">
					<view class="tui-list-cell">
						<view class="tui-list-cell-navigate">
							<image :src="item.headimgurl" class="img"></image>
							<view class="content">
								<view class="title">{{item.memberName?item.memberName:item.nikeName}}</view>
								<view class="sub-title">
									<image class="birth-image" src="~@/packageC/static/img/birth.png"></image>
									<text>{{item.memberBirth?item.memberBirth:'无生日'}}</text>
								</view>
							</view>
						</view>
					</view>
				</block>
			</view>
			<mix-empty v-else :backgroundColor="'#fff'"></mix-empty>
		</view>
		<sider-condition ref='condition' @touchmove.stop :list="menuList" @result="resultConditon"></sider-condition>
		<loading></loading>
		<tui-modal></tui-modal>
	</view>
</template>

<script>
	import mixEmpty from '@/components/mix-empty/mix-empty.vue'
	import siderCondition from '@/packageC/components/siderCondition/siderCondition.vue';
	export default {
		components: {
			mixEmpty,
			siderCondition
		},
		data() {
			return {
				customerList: [],
				winHeight: 0,
				timeType: '',
				sortType: '4',
				isAsc: '1',
				categoryId: '',
				searchKey: '',
				hasChoose: false,
				orgLv:uni.getStorageSync('orgLv'),
				menuList: [{
					'title': '时间段',
					'type': 'custom',
					'key': 'timeType',
					'isMutiple': false, //单选
					'detailList': [{
						title: '近一周',
						value: '1',
						isSelected: true,
					}, {
						title: '近一月',
						value: '2',
					}],
				}, {
					'title': '筛选方式',
					'type': 'custom',
					'key': 'sortType',
					'isMutiple': false, //单选
					'detailList': [{
						title: '订单时间',
						value: "1",
						isSelected: true,
					}, {
						title: '消费金额',
						value: "2",
					}, {
						title: '顾客生日',
						value: "3",
					}, {
						title: '首字母排序',
						value: "4",
					}],
				}, {
					'title': '时间排序',
					'type': 'custom',
					'key': 'isAsc',
					'isMutiple': false, //单选
					'detailList': [{
						title: '降序',
						value: "0",
						isSelected: true,
					},{
						title: '升序',
						value: "1",
					}],
				}],
			}
		},
		onLoad(options) {
			// #ifdef H5
			   this.$wechat.noShare();
			// #endif
			const that = this;
			this.$nextTick(function(){
				uni.getSystemInfo({
					success(res) {
						let winHeight = res.windowHeight;
						that.winHeight = winHeight;
					}
				})
				that.initEsOrderNotice();
			})
		},
		methods: {
			//清空输入值
			searchKeyFun() {
				this.searchKey = '';
				this.$nextTick(function(){
					this.initEsOrderNotice();
				})
			},
			initEsOrderNotice() {
				const params = {
					timeType: this.timeType,
					sortType: this.sortType,
					isAsc: this.isAsc,
					memberName: this.searchKey,
					categoryId: "",
					orgLv:this.orgLv
				};
				this.$http.getEsOrderNotice(params).then((res) => {
					if (res.status == 0) {
						this.customerList = res.data;
					}
				})
			},
			//筛选返回值
			resultConditon(obj) {
				this.$refs.condition.visibleDrawer = false;
				this.hasChoose = obj.hasChoose;
				console.log(obj);
				if(obj.result.timeType) {
					this.timeType = obj.result.timeType;
				}
				if(obj.result.sortType) {
					this.sortType = obj.result.sortType;
				}
				if(obj.result.isAsc) {
					this.isAsc = obj.result.isAsc;
				}
				this.$nextTick(function(){
					this.initEsOrderNotice();
				})
			},
			showSider(obj) {
				this.$refs.condition.visibleDrawer = true;
			},
		}
	}
</script>

<style lang="scss">
	.customer-notice {
		/* 隐藏scroll-view滚动条*/
		::-webkit-scrollbar {
			width: 0;
			height: 0;
			color: transparent;
			display: none;
		}
		.scrollList {
			height: calc(100vh - 142rpx);
			margin-top: 142rpx;
		}

		.search-header {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 9999;
			display: flex;
			align-items: center;
			background: #fff;
			padding: 28rpx 32rpx 28rpx 32rpx;
		}

		.order-condition {
			width: 36rpx;
			height: 40rpx;
			margin-left: 30rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.search-searchbox {
			flex: 1;
			height: 70rpx;
			border-radius: 80rpx;
			font-size: 24rpx;
			// background: $borderColor;
			border: 2rpx solid $themeColor1;
			padding: 6rpx 20rpx;
			box-sizing: border-box;
			color: #999;
			display: flex;
			align-items: center;
			overflow: hidden;

			.search-input {
				text-align: left !important;
				margin-left: 12rpx;
				// margin-top: 12rpx;
				width: 100% !important;
				background-color: #fff !important;
				color: #121212;
				font-size: 28rpx;

				.uni-input-input {
					width: 100%;
					font-size: 30rpx;
				}
			}

			.search-text {
				font-size: 32rpx;
				color: #444;
				margin: 0 20rpx 0 30rpx;
				color: $red;
			}

			.search-search-text {
				padding-left: 16rpx;
			}

			.search-search-key {
				max-width: 80%;
				height: 100%;
				padding: 0 16rpx;
				margin-left: 12rpx;
				display: flex;
				align-items: center;
				border-radius: 15px;
				background: rgba(0, 0, 0, 0.5);
				color: #fff;
			}

			.search-key-text {
				box-sizing: border-box;
				padding-right: 12rpx;
				font-size: 12px;
				line-height: 12px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.search-clear {
				padding: 10rpx;
			}

			.search-scan {
				image {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}

		.search-bar {
			position: fixed;
			top: 0;
			right: 0;
			z-index: 999;
			padding: 20rpx;

			.condition-image {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.search-bar-form {
			flex: 1;
			position: relative;
			border-radius: 32rpx;
			background: #f2f5f7;
			margin-right: 20rpx;
		}

		.search-bar-box {
			display: flex;
			align-items: center;
			position: relative;
			padding-left: 20rpx;
			padding-right: 20rpx;
			height: 64rpx;
			z-index: 1;
		}

		.search-bar-input {
			line-height: normal;
			width: 100%;
			padding-left: 20rpx;
			font-size: 30rpx;
			color: #333;
			background: #f2f5f7;
		}

		.phcolor {
			font-size: 30rpx;
		}


		.icon-search {
			position: relative;
			height: 26rpx;
			margin-right: 20rpx;
			font-size: inherit;
		}

		.cancel-btn {
			padding-left: 30rpx;
		}

		.btn-primary {
			height: 62rpx;
			width: 122rpx;
			font-size: 30rpx;
			line-height: 62rpx;
			margin-left: 30rpx;
		}

		.search-result::before {
			display: none;
		}

		.search-result::after {
			display: none;
		}

		.tui-list-cell {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			width: 100%;
		}

		.tui-list-cell-hover {
			background-color: #eee !important;
		}

		.tui-list-cell-navigate {
			width: 100%;
			position: relative;
			background: #fff;
			padding: 20rpx 32rpx;
			font-size: 28rpx;
			color: #333;
			display: flex;
			align-items: center;
			border-radius: 16rpx;
			margin-bottom: 16rpx;
		}

		.img {
			width: 84rpx;
			height: 84rpx;
			border-radius: 50%;
		}

		.content {
			width: 80%;
			padding-left: 30rpx;
		}

		.title {
			width: 80%;
			font-size: 28rpx;
			padding-bottom: 10rpx;
			color: #111;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis
		}

		.sub-title {
			display: flex;
			width: 80%;
			color: #999999;
			font-size: 20rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			font-size: 20rpx;

			.birth-image {
				width: 28rpx;
				height: 24rpx;
				margin-right: 8rpx;
			}
		}

		.tui-list {
			background-color: #f7f7f7;
			position: relative;
			width: 100%;
			display: flex;
			flex-direction: column;
			padding-bottom: env(safe-area-inset-bottom);
			padding: 0 32rpx;
		}

		.tui-list-cell-divider {
			font-size: 28rpx;
			color: #111;
			background: #f7f7f7;
			display: flex;
			align-items: center;
			margin: 24rpx 0;
		}

		.tui-indexed-list-bar {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			z-index: 9999;
			position: absolute;
			top: 132rpx;
			right: 0;
			padding-right: 32rpx;
			width: 44rpx;
		}

		.tui-indexed-list-text {
			font-size: 24rpx;
			color: #999999;

			&.active-text {
				color: #EA655E;
			}
		}

		.tui-indexed-list-bar.active {
			background-color: #EA655E;
		}

		.tui-indexed-list-alert {
			position: fixed;
			z-index: 20;
			width: 120rpx;
			height: 120rpx;
			line-height: 120rpx;
			right: 40%;
			top: 40%;
			border-radius: 16rpx;
			text-align: center;
			font-size: 50rpx;
			color: #fff;
			background-color: rgba(0, 0, 0, 0.5);
		}
	}
</style>
